<template>
  <div class="bili-dyn-card-link-common">
    <div v-if="mark" class="bili-dyn-card-link-common-mark"></div>
    <div class="bili-dyn-card-link-common__wrap">
      <div
        class="bili-dyn-card-link-common__cover"
        :title="getTitle(props.data)"
        :style="{ width: coverWidth + 'px' }"
      >
        <BImg
          :src="props.data.cover || ''"
          :format-options="{
            w: coverWidth,
            h: 64,
            c: true,
            style: 'web-dynamic',
          }"
        ></BImg>
      </div>
      <div class="bili-dyn-card-link-common__detail">
        <div
          class="bili-dyn-card-link-common__detail__title"
          :class="{ 'bili-ellipsis': !props.data.desc2 }"
        >
          {{ props.data.title }}
        </div>
        <div
          v-if="props.data.desc1"
          class="bili-dyn-card-link-common__detail__desc bili-ellipsis"
        >
          {{ props.data.desc1 }}
        </div>
        <div
          v-if="props.data.desc2"
          class="bili-dyn-card-link-common__detail__desc bili-ellipsis"
        >
          {{ props.data.desc2 }}
        </div>
      </div>
      <div class="bili-dyn-card-link-common__action">
        <button :class="action.type" @click="handleActionClick">
          <template v-if="action.icon">
            <i
              class="bili-dyn-card-link-common__action__icon"
              :class="action.icon"
            >
              {{ action.text }}
            </i>
          </template>
        </button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { LINKCARD_CARD, LINKCARD_CARD_COMMON, ParagraphItem } from '../util'
import BImg from '../component/BImg.vue'
const props = withDefaults(
  defineProps<{
    data: LINKCARD_CARD_COMMON
    dynId?: string
    logOptions?: Record<string, any>
  }>(),
  {
    data: () => ({}),
    logOptions: () => ({}),
  }
)
const button = computed(() => props.data.button)
const loading = ref(false)
const mark = computed(() => props.data.head_text || '')
const coverWidth = computed(() => (2 === props.data.style ? 48 : 64))
const action = computed(() => {
  let i = { visible: false, icon: {}, type: '', text: '' }
  let a = ''
  if (button.value?.type && button.value.type > 0) {
    i.visible = true
    switch (button.value.type) {
      case 1:
        a == button.value.jump_style.icon_url
        i.text = button.value.jump_style.text
        i.type = 'jump'
        break
      case 2:
        if (1 === button.value.status) {
          a = button.value.uncheck?.icon_url || ''
          i.text = button.value.uncheck?.text || ''
        } else {
          a = button.value.check?.icon_url || ''
          i.text = button.value.check?.text || ''
        }
        i.type = 2 === button.value.status ? 'check' : 'uncheck'
    }
  }
  if (a) {
    i.icon = {
      backgroundImage: `url(${''})`,
    }
  }
  return i
})
const extraData = computed(() => ({}))
const getTitle = (data: { title?: string; desc1?: string }) => {
  return [data.title, data.desc1].filter((e) => !!e).join('\n')
}
const handleActionClick = () => {}
</script>
<style lang="scss" scoped></style>
